<template>
  <div style="background: #fff; padding: 20px; box-sizing: border-box">
    <a-row>
      <a-col :span="24">
        <a-range-picker @change="onChange"/>
        <a-button type="primary" @click="search" style="background: #3C67F1;border: none;margin-left: 10px">查询
        </a-button>
      </a-col>
      <a-col :span="12" style="margin-top: 20px">
        <a-button type="primary" @click="add" style="background: #3C67F1;border: none;">新增灌溉计划</a-button>
      </a-col>
      <a-col :span="12" style="text-align: right; margin-top: 20px; margin-bottom: 20px">
        <a-button @click="exportXlsBtn('灌溉计划')" icon="export"
                  style="margin-right: 10px;border: 1px solid #B3D8FF;background: #ECF5FF;color: #409EFF;"
                  type="primary" ghost>导出
        </a-button>
      </a-col>
      <a-col :span="24" style="margin-bottom: 20px">
        <a-table rowKey='id' :columns="columns" :data-source="TableList" bordered :loading="loadingTable">
          <!-- slot-scope="text, record" -->
          <span slot="indexRender" slot-scope="record, index, indent, expanded">
                {{ indent + 1 }}
         </span>
          <span slot="pump" slot-scope="record, index, indent, expanded">
                {{ index.systemName == '1' ? '一号系统' : index.systemName == '2' ? '二号系统' : '未绑定' }}
         </span>
          <span slot="status" slot-scope="record, index, indent, expanded">
                {{ index.status == '0' ? '未执行' : index.status == '1' ? '执行中' : '已结束' }}
         </span>
          <span slot="workDay" slot-scope="record, index, indent, expanded">
                {{ index.workDay + '天' }}
         </span>
          <span slot="irrigationOrder" slot-scope="record, index, indent, expanded">
                {{ index.irrigationOrder == '0' ? '依次执行' : '依次执行' }}
         </span>
          <span slot="irrigationTotal" slot-scope="record, index, indent, expanded">
                {{ index.irrigationTotal + '分钟' }}
         </span>
          <span slot="action" slot-scope="record, index, indent, expanded">
            <a-button v-show="index.status=='0'" type="primary"
                      style="margin-right: 10px;background: #3C67F1;border: none;"
                      @click="edit(index.id)">修改</a-button>
            <a-popconfirm
              title="是否删除?"
              ok-text="是"
              cancel-text="否"
              @confirm="deleteLists(index.id)"
            >
              <a-button v-show="index.status=='0'" type="danger">删除</a-button>
            </a-popconfirm>
            <a-button v-show="index.status=='1'"
                      @click="routerTo(index.id)"
                      type="primary"
                      style="margin-left: 10px;background: #3C67F1;border: none;">控制</a-button>
              <a-button v-show="index.status=='1'" @click="stop(index.id)" type="primary"
                        style="margin-left: 10px;background: #3C67F1;border: none;">计划终止</a-button>
          </span>
        </a-table>
        <div style="text-align: right;margin-top: 30px">
          <a-pagination v-model="pageNo" :page-size="pageSize" :total="total" :pagination="false"
                        @change="onShowSizeChange"/>
        </div>
      </a-col>
    </a-row>
    <IrrigationPlanAdd ref="IrrigationPlanAdd"></IrrigationPlanAdd>
  </div>
</template>

<script>
import {exportXls} from "@api/meteorological";
import {unexecutedPlan, suspensionPlan} from "@/api/device"
import IrrigationPlanAdd from './IrrigationPlanAdd'
import {list, deleteId} from '@/api/plan'

const columns = [
  {
    title: '序号',
    dataIndex: 'name',
    scopedSlots: {customRender: 'indexRender'}
  },
  {
    title: '计划名称',
    dataIndex: 'planName'
  },
  {
    title: '是否联动泵',
    dataIndex: 'systemName',
    scopedSlots: {customRender: 'pump'}
  },
  {
    title: '工作日期',
    dataIndex: 'workDay',
    scopedSlots: {customRender: 'workDay'}
  },
  {
    title: '创建时间',
    dataIndex: 'createDate'
  },

  {
    title: '执行顺序',
    dataIndex: 'irrigationOrder',
    scopedSlots: {customRender: 'irrigationOrder'}
  },

  {
    title: '开阀时间',
    dataIndex: 'startDate'
  },
  {
    title: '关阀时间',
    dataIndex: 'endDate'
  },
  {
    title: '灌溉时长',
    dataIndex: 'irrigationTotal',
    scopedSlots: {customRender: 'irrigationTotal'}
  },
  {
    title: '任务状态',
    dataIndex: 'status',
    scopedSlots: {customRender: 'status'}
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: {customRender: 'action'}
  }
]

export default {
  data() {
    return {
      TableList: [],
      columns,
      loadingTable: true,
      exportUrl: '/fabr/fabrIrrigationPlan/exportXls',
      startTime: '',
      endTime: '',
      pageNo: 0,
      pageSize: 10,
      total: 0
    }
  },
  components: {
    IrrigationPlanAdd
  },
  mounted() {
    this.dataList(this.pageNo, this.pageSize, this.startTime, this.endTime)
  },
  methods: {
    // 跳转页面传参
    routerTo(id) {
      console.log(id)
      this.$router.push({path: '/wfinfo/valveControl/irrigationGroup', query: {planId: id}});
    },
    // 停止计划
    stop(id) {
      let that = this
      this.$confirm({
        title: '是否要停止该计划?',
        content: h => <div style="color:red;">当前计划阀门会自动关闭</div>,
        onOk() {
          suspensionPlan(id).then(res => {
            that.$message.success('计划停止成功');
            that.dataList()
          }).catch(err => {
            that.$message.error('计划停止失败');
          })
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    },
    // 时间框
    onChange(date, dateString) {
      this.startTime = dateString[0]
      this.endTime = dateString[1]
      console.log(date, dateString);
    },
    // 分页
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.dataList(this.pageNo, this.pageSize, this.startTime, this.endTime)
    },
    // 搜索
    search() {
      this.dataList(this.pageNo, this.pageSize, this.startTime, this.endTime)
    },
    // 导出
    exportXlsBtn(message) {
      exportXls(this.exportUrl).then(res => {
        const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
        const urls = window.URL.createObjectURL(blob)
        const a = document.createElement('a') // 生成虚拟a标签
        a.href = urls
        a.download = message + '.xls'
        a.click()
        document.body.removeChild(a) // 下载完成移除元素
        window.URL.revokeObjectURL(urls) // 释放掉blob对象
      }).catch(err => {

      })
    },
    // 数据获取
    dataList(pageNo, pageSize, startDate, endDate) {
      list(pageNo, pageSize, startDate, endDate).then(res => {
        this.TableList = res.result.records
        this.loadingTable = false
      }).catch(err => {
        this.loadingTable = false
      })
    },
    // 新增轮灌组
    add() {
      this.$refs.IrrigationPlanAdd.modal2Visible = true
      this.$refs.IrrigationPlanAdd.title = '新增灌溉计划'
      this.$refs.IrrigationPlanAdd.defaultOption = []
      this.$refs.IrrigationPlanAdd.TableList = []
      this.$refs.IrrigationPlanAdd.group = []
      this.$nextTick(() => {
        this.$refs.IrrigationPlanAdd.resetForm()
        this.$refs.IrrigationPlanAdd.irrigationGroup()
      })
    },
    // 编辑
    edit(id) {
      this.$refs.IrrigationPlanAdd.modal2Visible = true
      this.$refs.IrrigationPlanAdd.title = '编辑灌溉计划'
      this.$refs.IrrigationPlanAdd.editList(id)
    },
    // 删除
    deleteLists(id) {
      this.loadingTable = true
      deleteId(id).then(res => {
        this.$message.success(res.message);
        this.dataList(this.pageNo, this.pageSize, this.startTime, this.endTime)
        this.loadingTable = false
      }).catch(err => {
        this.loadingTable = false
      })
    },
    getCurrentStyle(current, today) {
      const style = {}
      if (current.date() === 1) {
        style.border = '1px solid #1890ff'
        style.borderRadius = '50%'
      }
      return style
    }
  }
}
</script>